{extend name="base"/}
{block name="resources"}
<link rel="stylesheet" type="text/css" href="HOME_CSS/index.css"/>
{/block}
{block name='head'}
<div class="layui-header">
	<div class="layui-logo">
		<a href="{:url('shop/index/index')}">
			{notempty name="$website_info.logo"}
			<img src="{:img($website_info.logo)}">
			{else/}
			<img src="HOME_IMG/shop_logo.png">
			{/notempty}
		</a>
	</div>

	<!-- 账号 -->
	<div class="ns-login-box layui-layout-right">
		<ul class="layui-nav ns-head-account">
			<li class="layui-nav-item layuimini-setting">
				<a href="javascript:;">
					{$sys_user_info['username']}</a>
				<dl class="layui-nav-child">
					<dd>
						<a href="{:addon_url('home/account/account')}">个人中心</a>
					</dd>
					<dd>
						<a href="{:addon_url('home/login/logout')}" class="login-out">退出登录</a>
					</dd>
				</dl>
			</li>
		</ul>
	</div>
</div>
{/block}
{block name="main"}
<div class="ns-home-index">
	<div class="ns-home-info">
		{if $business_type == 3}
		<button class="layui-btn ns-bg-color" onclick="{if $sys_user_info.is_admin == 1 || $config_info.status == 1}addShop(){else/}purchasePlan(){/if}">创建店铺</button>
		{/if}
		<div class="ns-single-filter-box">
			<div class="layui-form">
				<div class="layui-input-inline">
					<input type="text" name="search_text" placeholder="请输入店铺名称" autocomplete="off" class="layui-input ns-len-mid">
					<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
						<i class="layui-icon">&#xe615;</i>
					</button>
				</div>
			</div>
		</div>
	</div>

	<div class="ns-store-list">

	</div>

	<div id="list_page"></div>
</div>
{/block}
{block name="script"}
<script>
	var form, laytpl, laypage, list_count = 0, limit = 20, search_text = "", curr = 1,
		currTime = "{$now}";
	layui.use(['form', 'laytpl', 'laypage'], function() {
		form = layui.form;
		laytpl = layui.laytpl;
		laypage = layui.laypage;
		form.render();
		
		// curr = location.hash.replace('#!page=', '') ? location.hash.replace('#!page=', '') : curr;
		renderStoreList(search_text, curr);
		console.log(list_count);
		pageList(list_count, limit, curr);

	    /**
	     * 搜索功能
	     */
	    form.on('submit(search)', function(data) {
			search_text = data.field.search_text;
			renderStoreList(search_text, curr);
			pageList(list_count, limit, curr);
		});
		
	});

	function renderStoreList(search_text, curr) {
		$(".ns-store-list").empty();
		$.ajax({
			type: "POST",
			url: ns.url("home/index/index"),
			data: {
				"page": curr,
				"page_size": limit,
				"search_text": search_text
			},
			dataType: 'JSON',
			async: false,
			success: function(res) {
				if (res.code == 0) {
					var data = res.data.list;
					list_count = res.data.count;

					if(!data.length){
						var empty = "<div class='empty'>您还未创建店铺，快创建店铺体验吧！</div>";
						$(".ns-store-list").html(empty);
					}

					var html = "";
					for (var i=0; i<data.length; i++) {
						var d = data[i];
						if(currTime > d.expire_time && d.expire_time > 0){
							html += `<div class="ns-store-li" onclick="entry(`+ d.site_id +`)">`;
						}else{
							html += `<div class="ns-store-li ns-border-color" onclick="entry(`+ d.site_id +`)">`;
						}
								html += `<p class="ns-store-name">`+ d.site_name +`</p>`;
								html += `<p class="ns-store-time">套餐名称：`+ d.group_name +`</p>`;
								html += `<p class="ns-store-time">到期时间：`+ (d.expire_time > 0 ? ns.time_to_date(d.expire_time) : '永久') +`</p>`;
								html += `<div class="ns-store-operation">`;
									if(currTime > d.expire_time && d.expire_time > 0) {

										html += `<div class="store-ident">`;
											html += `<span class="store-tab">已过期</span>`;
											html += `<a class="ns-text-color" href="${ns.url('shop/index/renewexpiretime',{site_id: d.site_id})}">续费</a>`;
										html += `</div>`;
										html += `<button class="layui-btn layui-btn-primary">进入店铺</button>`;
									}else{
										html += `<span class="store-ident ns-text-color store-tab">营业中</span>`;
										html += `<button class="layui-btn layui-btn-primary ns-text-color ns-border-color">进入店铺</button>`;
									}
								html += `</div>`;
							html += `</div>`;
					}

					$(".ns-store-list").append(html);
				}
			}
		});
	}
	//
	$('body').on('mouseover','.ns-store-li',function () {
		$(this).find(".store-ident").show();
	});
	$('body').on('mouseout','.ns-store-li',function () {
		$(this).find(".store-ident").hide();
	});

	function pageList(count, limit, curr) {
		if (!count) return false;
		page = new Page({
			elem: 'list_page',
			count: count,
			limit: limit,
			curr: curr,
			callback: function(obj){
				renderStoreList(search_text, obj.page);
			}
		});
	}

	/* 添加店铺 */
	function addShop() {
		location.href = ns.url("home/site/add");
	}

	/* 购买套餐 */
	function purchasePlan(){
		location.href = ns.url("home/sysusergroup/index");
	}

	/* 进入店铺 */
	function entry(site_id) {
		location.href = ns.url("shop/index/index" ,{site_id:site_id});
	}
</script>
{/block}